import { list } from '@/services/system/permission';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import React, { useRef } from 'react';

const PermissionList: React.FC = () => {
  const actionRef = useRef<ActionType>();

  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const columns: ProColumns<SYSTEM.Permission>[] = [
    {
      title: <FormattedMessage id="pages.id" defaultMessage="Id" />,
      dataIndex: 'id',
      width: 120,
      search: false,
    },
    {
      title: <FormattedMessage id="pages.user.permission.name" defaultMessage="Permission Name" />,
      dataIndex: 'name',
      width: 220,
    },
    {
      title: <FormattedMessage id="pages.user.permission.url" defaultMessage="Url" />,
      dataIndex: 'url',
    },
    {
      title: <FormattedMessage id="pages.createDate" defaultMessage="Create Date" />,
      dataIndex: 'createDate',
      valueType: 'dateTime',
      width: 260,
      search: false,
    },
  ];

  return (
    <PageContainer>
      <ProTable<SYSTEM.Permission, API.PageParams>
        headerTitle={intl.formatMessage({
          id: 'pages.user.permission.title',
          defaultMessage: 'Permission List',
        })}
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        request={list}
        columns={columns}
      />
    </PageContainer>
  );
};

export default PermissionList;
